<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>消费收银</title>
<!--公共样式开始-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/reset.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/common.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Plugins/FontAwesome/css/font-awesome.min.css">
<!--公共样式结束-->
<!--页面样式开始-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/module_form.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/page_shouyinList.css">
<!--页面样式结束--
<!--公共JS开始-->
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.min.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.timer.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/common.js"></script>
<!--公共JS结束-->
<!--数据列表插件开始-->
<link href="{$NOW_THEME_URL}/Assets/Plugins/ContextMenu/src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="{$NOW_THEME_URL}/Assets/Plugins/ContextMenu/src/jquery.ui.position.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Plugins/ContextMenu/src/jquery.contextMenu.js"></script>
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Plugins/Etgrid/Css/etgrid.css">
<script src="{$NOW_THEME_URL}/Assets/Plugins/Etgrid/Js/etgrid.js"></script>
<!--数据列表插件结束-->
<!--ZTree开始-->
<link rel="stylesheet" href="{$NOW_THEME_URL}/Assets/Plugins/ZTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="{$NOW_THEME_URL}/Assets/Plugins/ZTree/js/jquery.ztree.core-3.5.js"></script>
<!--ztree结束-->
<!--滑动门插件开始-->
<script src="{$NOW_THEME_URL}/Assets/Plugins/EtTab/Js/ettab.js"></script>
<!--滑动门插件结束-->
<style type="text/css">
	body {
		overflow:hidden;
	}
</style>
</head>

<body>
	<div class="yhlist clearfix">
		<div class="yhlist_left">
			<h4 class="yl_title">消费项目</h4>
			<p class="search">
				<input name="" type="text" placeholder="请输入商品条形码">
			</p>
			<ul class="tab clearfix">
				<li class="tabhover" fortab="tab1" show="tab1_0">常用商品</li>
				<li show="tab1_1" fortab="tab1">字母查找</li>
				<li show="tab1_2" fortab="tab1">高级搜索</li>
			</ul>
			<div class="mybox">
				<div class="yh_content1" id="tab1_0" fortab="tab1" dosome="false" >
					<volist name="proList" id="v" offset='0' length='10'>
						<span typeid="{$v.typeid}" aid='{$v.id}'>{$v.ctitle}</span>
					</volist>
				</div>
				<div class="yh_content2" id="tab1_1" fortab="tab1" dosome="false" style="display:none;">
					<div class="selectP">
						<span initials='A'>A</span>
						<span initials='B'>B</span>
						<span initials='C'>C</span>
						<span initials='D'>D</span>
						<span initials='E'>E</span>
						<span initials='F'>F</span>
						<span initials='G'>G</span>
						<span initials='H'>H</span>
						<span initials='I'>I</span>
						<span initials='J'>J</span>
						<span initials='K'>K</span>
						<span initials='L'>L</span>
						<span initials='M'>M</span>
						<span initials='N'>N</span>
						<span initials='O'>O</span>
						<span initials='P'>P</span>
						<span initials='Q'>Q</span>
						<span initials='R'>R</span>
						<span initials='S'>S</span>
						<span initials='T'>T</span>
						<span initials='U'>U</span>
						<span initials='V'>V</span>
						<span initials='W'>W</span>
						<span initials='X'>X</span>
						<span initials='Y'>Y</span>
						<span initials='Z'>Z</span>
					</div>
					<div class="yh_table">
						<table cellpadding="0" cellspacing="0" class="module_form" width="400">
							<thead>
								<tr>
									<th class="ele_title">商品名称</th>
									<th class="ele_dj">单价</th>
									<th class="ele_kc">库存</th>
									<th class="ele_cz">操作</th>
								</tr>
							</thead>
							<tbody class="prolist1">
								<tr>
									<td colspan="4" style="height:35px;"></td>
								</tr>
								
								<volist name="proList" id="v">
									<tr>
										<td class="ele_title">{$v.ctitle}</td>
										<td class="ele_dj">￥{$v.sprice}</td>
										<td class="ele_kc">{$v.stock}</td>
										<td class="ele_cz"><span class="tj">添加</span></td>
									</tr>
								</volist>
							</tbody>
						</table>
					</div>		
				</div>
				<div class="yh_content3" id="tab1_2" fortab="tab1" dosome="false" style="display:none;">
					<div class="gj_search">
						<form action="" method="get">
							<div class="clearfix">
								<select class="gj_text gjselect" name="brandid">
									<option>请选择商品品牌</option>
									<option>品牌1</option>
									<option>品牌2</option>
								</select>
								<select class="gj_text gjselect" name="typeid">
									<option>请选择商品类型</option>
									<option>类别1</option>
									<option>类别2</option>
								</select>
								<input class="form_ele_submit" type="button" value="提交" name="submit">
							</div>
							<div class="tj"></div>
						</form>
					</div>
					<div class="yh_table1">
						<table cellpadding="0" cellspacing="0" class="module_form" width="400">
							<thead>
								<tr>
									<th class="ele_title">商品名称</th>
									<th class="ele_dj">单价</th>
									<th class="ele_kc">库存</th>
									<th class="ele_cz">操作</th>
								</tr>
							</thead>
							<tbody class="prolist2">
								<tr>
									<td colspan="4" style="height:35px;"></td>
								</tr>
								<volist name="proList" id="v">
									<tr>
										<td class="ele_title">{$v.ctitle}</td>
										<td class="ele_dj">￥{$v.sprice}</td>
										<td class="ele_kc">{$v.stock}</td>
										<td class="ele_cz"><span class="tj">添加</span></td>
									</tr>
								</volist>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="yhlist_right">
			<div class="table_box" style="border-left:1px solid #999;height:350px;">
				<table cellpadding="0" cellspacing="0" class="module_form" width="400">
					<thead>
						<tr>
							<th class="ele_title">名称</th>
							<th class="ele_dj">编号</th>
							<th class="ele_kc">价格</th>
							<th class="ele_kc">数量</th>
							<th class="ele_kc">小计</th>
							<th class="ele_cz">操作</th>
						</tr>
					</thead>
					<tbody class="prolist2">
						<volist name="listCart.data" id="v" offset="0" length="6">
							<tr>
								<td class="ele_title">{$v.title}</td>
								<td class="ele_dj">{$v.pno}</td>
								<td class="ele_kc">￥{$v.price}</td>
								<td class="ele_kc">{$v.amount}</td>
								<td class="ele_kc">￥{$v['amount']*$v['price']|number_format=2}</td>
								<td class="ele_cz"><span id="{$v.id}" class="delOne">删除</span></td>
							</tr>
						</volist>
					</tbody>
				</table>
			</div>
			<div class="xiaofei">
				<div class="total clearfix">
					<div>
						<b>合计：</b>
						[ <em>总数量 {$listCart.totalNum}</em> ]
						[ <em>总金额 {$listCart.totalPrice}</em> ]
					</div>
				</div>
				<div class="js clearfix">
					<div>
						<input type="text" name="vipno" id="readCard" class="readCard">
						<a class="form_ele_reset bg_orange">读卡</a>
						<a class="form_ele_reset bg_guadan">挂单</a>
						<a class="form_ele_reset bg_jiegua">解挂</a>
						<a class="form_ele_reset bg_remove">清空</a>
						<a class="form_ele_submit bg_payment">结账</a>
					</div>
				</div>
				<div class="vip">
					<h4>会员信息</h4>
					<form action="" method="post" id="memberAdd_form">
						<table cellpadding="0" cellspacing="0" class="module_form vip_m_f" width="100%">
							<tr>
								<td class="ele_title"><label for="cardnum">会员卡号：</label></td>
								<td class="ele_content"><input name="vipno" type="text" id="vipno" value="{$member.vipno}" class="form_ele_text width_200" value="" readonly></td>
								<td class="ele_title"><label for="level">会员姓名：</label></td>
								<td class="ele_content"><input name="realname" type="text" id="realname" value="{$member.realname}" class="form_ele_text width_200" value="" readonly></td>
							</tr>
							<tr>
								<td class="ele_title"><label for="realname">可用储值：</label></td>
								<td class="ele_content"><input name="use_money" type="text" id="use_money" value="{$member.use_money}" class="form_ele_text width_200" value="" readonly></td>
								<td class="ele_title"><label for="sex">可用积分：</label></td>
								<td class="ele_content"><input name="use_jifen" type="text" id="use_jifen" value="{$member.use_jifen}" class="form_ele_text width_200" value="" readonly></td>
							</tr>
							<tr>
								<td class="ele_title"><label for="phone">手机号码：</label></td>
								<td class="ele_content"><input name="mobile" type="text" id="mobile" value="{$member.mobile}" class="form_ele_text width_200" value="" readonly></td>
								<td class="ele_title"><label for="telphone">固定电话：</label></td>
								<td class="ele_content"><input name="phone" type="text" id="phone" value="{$member.phone}" class="form_ele_text width_200" value="" readonly></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">	
	function tableShow(){
		var table_box_width = $(window).width() - 364;
		var table_box_height = $(window).height() - 251;
		//alert($(window).width());
		$('.table_box').width(table_box_width);
		$('.table_box').height(table_box_height);
	}
	//初始化调用
	tableShow();
	//窗口改变大小调用
	$(window).on('resize',function(){
		tableShow();
	});

	//实例化滑动门
	var tabConfig = {
			tabName: 'tab1',
			tabHeader: '.tab',
			tabContent: '.mybox',
			tabContentFun : {
			}
		};
	//tableList.erefresh();
	//实例化列表
	var memberTab = $('body').EtTab(tabConfig);
	
	//文本框获取焦点
	$('#readCard').focus();
	
	//常用商品
	$('.yh_content1 >span').on('click',function(){
		var pid = $(this).attr('aid');
		var typeid = $(this).attr('typeid');
		
		if(typeid!=0){
			openDialogs(pid);
		}else{
			$.get("{:U('Sell/addCart')}",{pid:pid},function(data){
				if(data.status==1){
					var obj = windowApi.lhgdialog.list['Sell_index'];
					obj.reload(obj); //指定刷新某个窗口
				}else{
					windowApi.lhgdialog.alert(data.info,function(){return;});
				}
			});
		}
	});
	
	//购物车删除某件商品
	$('.delOne').on('click',function(){

		var obj = $(this);
		var id  = obj.attr('id');
		
		$.get("{:U('Sell/delCart')}",{id:id},function(data){
			if(data.status==1){
				obj.parents('tr').remove();
			}else{
				windowApi.lhgdialog.alert(data.info,function(){return;});
			}
		})
	});
	
	//清空购物车
	$('.bg_remove').on('click',function(){
		
		var msg = "确定清空购物车吗？";
		windowApi.lhgdialog.confirm(msg, function(){
			$.get("{:U('Sell/removeCart')}",function(data){
				var obj = windowApi.lhgdialog.list['Sell_index'];
				obj.reload(obj); //指定刷新某个窗口
			});
		},function(){
			return;
		});
	})
	
	//按字母查找
	$('.selectP >span').on('click',function(){
		var initials = $(this).attr('initials');
		
		$.get('{:U("Sell/index")}',{initials:initials},function(data){
			
			if(data.status==1){
				$(".prolist1").load("{:U('Sell/prolist')}");
			}else{
				windowApi.lhgdialog.alert(data.info,function(){return;});
			}
		})
	})
	
	//挂单
	$(".bg_guadan").on('click',function(data){
		var href   = "{:U('Sell/lockOrder')}";
		var width  = '400px';
		var height = '120px';
		var title  = '请输入挂单说明';
		openDialog('Sell_lockOrder',href,width,height,title);
	});
	
	//解挂
	$(".bg_jiegua").on('click',function(data){
		var href   = "{:U('Sell/unlockOrder')}";
		var width  = '700px';
		var height = '400px';
		var title  = '挂单列表';
		openDialog('Sell_unlockOrder',href,width,height,title);
	});
	
	//读卡
	$('.bg_orange').on('click',function(){
		
		var vipno = $('#readCard').val();
		
		if(vipno){
			$.get("{:U('Sell/SellreadCard')}",{vipno:vipno},function(data){
				if(data.status==1){
					$("#phone").val(data.data.phone);
					$("#mobile").val(data.data.mobile);
					$("#sex").val(data.data.sex);
					$("#realname").val(data.data.realname);
					$("#vipno").val(data.data.vipno);
					$("#use_money").val(data.data.use_money);
					$("#use_jifen").val(data.data.use_jifen);
				}else{
					windowApi.lhgdialog.alert(data.info,function(){
						$('#readCard').val('');
						$('#readCard').focus();
						return;
					});
				}
			});
		}else{
			windowApi.lhgdialog.alert("请输入会员卡号",function(){return;});
		}
	});
	
	//结账
	$('.bg_payment').on('click',function(){
		
		$.get("{:U('Sell/addSellOrder')}",function(data){
			if(data.status==1){
				
				var href = '{:U("Sell/payment")}&orderno='+data.data;
				var width = '610px';
				var height = '400px';
				var title = '结账付款';
				openDialog('Sell_payment',href,width,height,title);
			}else{
				windowApi.lhgdialog.alert(data.info,function(){return;});
			}
		});
	});
	
	//批量删除
	$('.memberDel').on('click',function(){
		var val = '';
		$('.et_tbody .chk_item:checked').each(function(index, element) {
			if(val){
				val += ','+$(this).val();
			}else{
				val += $(this).val();
			}
		});
		alert(val);
	});
	
	//移动到分组
	$('.memberGroup .submenu>li').on('click',function(){
		var val = '';
		$('.et_tbody .chk_item:checked').each(function(index, element) {
			if(val){
				val += ','+$(this).val();
			}else{
				val += $(this).val();
			}
		});
		
		alert('将Id为'+val+'的数据移动到Id为'+$(this).attr('toid')+'的会员分组');
	});
	
	//表格隔行换色
	$('.module_form tr:odd').addClass('odd');
	$('.module_form tr:even').addClass('even');
	
	//弹出商品计费规则供客户选择
	function openDialogs(id){
		var href = '{:U("Sell/detail")}&id='+id;
		var width = '570px';
		var height = '400px';
		var title = '商品属性';
		openDialog('Sell_detail',href,width,height,title);
	}
	
	//左下列表自适应
	function yhtableShow(){
		var yh_height  =  $(window).height() - 265;
		var yh_height1 =  $(window).height() - 197;
		$('.yh_table').height(yh_height);
		$('.yh_table1').height(yh_height1);
	}
	
	function updateTotalPrice(){
		$.get("{:U('Sell/getTotal')}",function(data){
			return data;
		})
	}
	//初始化调用
	yhtableShow();
	//窗口改变大小调用
	$(window).on('resize',function(){
		yhtableShow();
	});
</script>
</html>
